﻿@page
@using SXFramWork.Web
@{
    ViewData["Title"] = "菜单管理";
    Layout = AdminLayout.Pjax(HttpContext);
}
<style>
    #tree {
        overflow: auto;
    }
</style>
<div id="container">
    <div class="layui-col-220">
        <div class="layui-nav-title">菜单管理</div>
        <div id="tree" class="layui-tree-cus" style="overflow:auto;"></div>
    </div>
    <div class="right-col-body">
        <div class="list-wall">
            <div class="layui-form list-search">
                <button type="button" class="layui-btn layui-btn-sm  layui-hide" data-type="reload">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>
                <button type="button" class="layui-btn layui-btn-normal" data-type="Add"><i class="layui-icon"></i>添加</button>
                <button type="button" class="layui-btn layui-btn-danger" data-type="Delete"><i class="layui-icon"></i> 删除</button>
            </div>
            <table class="layui-hide" id="tablelist" lay-filter="tool"></table>
        </div>
    </div>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-warm" lay-event="edit">修改</a>
    </script>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="status" value="{{d.enabled}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="statusedit" {{ d.enabled?'checked':''}}>
    </script>

    <script>
        layui.use(['table', 'layer', 'jquery', 'common', 'tree'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    os = layui.common,
                    tree = layui.tree;
                $("#tree").css({ 'height': $(window).height() - 140 });

                os.tableRender({
                    elem: '#tablelist',
                    url: '/api/admin/syspermission/list',
                    cols: [
                        [
                            { type: 'radio', fixed: 'left' },
                            { field: 'name', title: '菜单名称', sort: true, fixed: 'left' },
                            { field: 'code', title: '唯一编码' },
                            { field: 'path', title: '页面路径' },
                            { field: 'icon', width: 80, title: '图标', templet: function (a) { return "<i class='layui-icon " + a.icon + " '></i> " } },
                            { field: 'enabled', width: 120, title: '是否显示', templet: '#switchTpl' },
                            { field: 'createTime', title: '创建时间' },
                            { field: 'remarks', title: '备注' },
                            {
                                field: 'sort', width: 120, title: '排序', templet: function (res) {
                                    return '<a href="javascript:void(0)" class="table-sort text-color" lay-event="sortup" title="向上"><i class="layui-icon layui-icon-return"></i></a><a href="javascript:void(0)"  lay-event="sortdown" class="table-sort text-color" title="向下"><i class="layui-icon layui-icon-return"></i></a>';
                                }
                            },
                            { width: 150, title: '操作', templet: '#tool' }
                        ]
                    ]
                });

                var id = '', active = {
                    initTree() {
                        os.ajax('api/admin/syspermission/gettree/', {}, function (res) {
                            tree.render({
                                elem: '#tree'
                                , data: res.data
                                , id: 'treeId'
                                , onlyIconControl: true
                                , click: function (obj) {
                                    id = obj.data.id;
                                    active.reload();
                                }
                            });
                        }, 'get');
                    },
                    reload: function () {
                        os.tableReload('tablelist',
                            { where: { parentId: id } }
                        );
                        os.ajax('api/admin/syspermission/gettree', {}, function (res) {
                            tree.reload('treeId', {
                                data: res.data
                            });
                        }, 'get');

                    },
                    Add: function () {
                        os.Open('添加菜单', '/admin/syspermission/add', '720px', '520px', function () {

                        });
                    },
                    Delete: function () {
                        var checkStatus = table.checkStatus('tablelist')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.warning("请选择要删除的项目");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str = item.id;
                        });
                        layer.confirm('确定要执行批量删除吗？', function (index) {
                            layer.close(index);
                            os.ajax('api/admin/syspermission/delete', str, function (res) {
                                if (res.code === 1) {
                                    active.reload();
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.msg);
                                }
                            });
                        });

                    }
                };
                active.initTree();
                $('.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        os.Open('编辑菜单', '/admin/syspermission/add?id=' + data.id, '720px', '520px', function () {

                        })
                    }
                    if (obj.event === 'sortdown') {
                        os.ajax('api/admin/syspermission/sort', { parentId: data.parentId, id: data.id, flag: 1 }, function (res) {
                            if (res.code === 1) {
                                active.reload();
                            }
                            else {
                                os.error(res.msg);
                            }
                        }, 'get');
                    }
                    if (obj.event === 'sortup') {

                        os.ajax('api/admin/syspermission/sort', { parentId: data.parentId, id: data.id, flag: 0 }, function (res) {
                            if (res.code === 1) {
                                active.reload();
                            }
                            else {
                                os.error(res.msg);
                            }
                        }, 'get');
                    }
                });
            });
    </script>

</div>

